<section id="main-content">
  <section class="wrapper">
    <!--state overview start-->
    <div class="row">
      <div class="col-lg-12">
        <!-- 数据概览 icon:数据加载更新 报表下载-->

        <!--
          项目总和 list:项目总和（关注项目类、销售类、研发类、部门类、其他类）
          项目分部地区 （东北地区、西北地区、西南地区、华南地区、华中地区、华北地区、华东地区）
          项目收入总预测
          项目回款总和
          项目消费总预测 （客户交际费用、差旅费用、采购费用、其他费用）
          项目消费总和（线索阶段、立项阶段、合同阶段、交付阶段、回款阶段）
        -->

        <!-- 数据概览 -->
        <div class="view-header">
          <span>数据概览</span>
          <ul>
            <li>
              <label>
                <i class="icon-refresh"></i>
              </label>
            </li>
            <li>
              <label>
                <i class="icon-print"></i>
              </label>
            </li>
          </ul>
        </div>
        <div class="row">
          <div class="col-lg-6">
            <div class="row">

              <div class="col-lg-12">
                <section class="panel">
                  <header class="panel-heading add-heading">
                    所有项目人力投入和人力费用按项目阶段分布
                    <i class="add-icon">更新于：2018/09/05 14:00:00</i>
                  </header>
                  <footer class="weather-category">
                    <ul>
                      <li>
                        <h5>出差总人力</h5>
                        393.22人/天
                      </li>
                      <li>
                        <h5>预测总收入</h5>
                        ￥99999.00万元
                      </li>
                      <li>
                        <h5>实际总回款</h5>
                        ￥99999.00万元
                      </li>
                    </ul>
                  </footer>
                  <div class="panel-body">
                    <div id="main1" style="width:100%;height:434px;"></div>
                  </div>
                </section>
              </div>
            </div>

          </div>
          <div class="col-lg-6">
            <div class="row">
              <div class="col-lg-12">
                <section class="panel">
                  <div class="panel-body">
                    <ul class="summary-list">
                      <li>
                        <a href="javascript:;">
                          <i class="text-primary">关注项目</i>
                          12
                        </a>
                      </li>
                      <li>
                        <a href="javascript:;">
                          <i class="text-success">销售项目</i>
                          2
                        </a>
                      </li>
                      <li>
                        <a href="javascript:;">
                          <i class="text-danger">研发项目</i>
                          4
                        </a>
                      </li>
                      <li>
                        <a href="javascript:;">
                          <i class="text-info">部门事务</i>
                          6
                        </a>
                      </li>
                      <li>
                        <a href="javascript:;">
                          <i class="text-muted">其他</i>
                          3
                        </a>
                      </li>
                    </ul>
                  </div>
                </section>
              </div>
              <div class="col-lg-4" style="width: 100%">
                <section class="panel">
                  <header class="panel-heading add-heading">
                    项目出差报销费用TOP10
                  </header>
                  <div class="panel-body">
                    <div id="spmain" style="width:100%;height:362px;"></div>
                  </div>
                </section>
              </div>
            </div>
          </div>
        </div>

        <div class="row">
          <div class="col-lg-8">
            <section class="panel">
              <header class="panel-heading add-heading">
                所有项目人力投入和人力费用按月分布
                <i class="add-icon">更新于：2018/09/05 14:00:00</i>
              </header>
              <div class="panel-body">
                <div id="main2" style="width:100%;height:362px;"></div>
              </div>
            </section>
          </div>
          <div class="col-lg-4">
            <section class="panel">
              <header class="panel-heading add-heading">
                项目转化率
                <i class="add-icon">更新于：2018/09/05 14:00:00</i>
              </header>
              <div class="panel-body">
                <div id="main3" style="width:100%;height:362px;"></div>
              </div>
            </section>
          </div>
        </div>

        <div class="row">
          <div class="col-lg-8" style="width: 50%">
            <section class="panel">
              <header class="panel-heading add-heading">
                所有项目出差总费用（预测和实际）按月分布
                <i class="add-icon">更新于：2018/09/05 14:00:00</i>
              </header>
              <div class="panel-body">
                <div id="main4" style="width:100%;height:362px;"></div>
              </div>
            </section>
          </div>
          <div class="col-lg-4" style="width: 50%">
            <section class="panel">
              <header class="panel-heading add-heading">
                所有项目出差总费用（预测和实际）按项目阶段分布
                <i class="add-icon">更新于：2018/09/05 14:00:00</i>
              </header>
              <div class="panel-body">
                <div id="main5" style="width:100%;height:362px;"></div>
              </div>
            </section>
          </div>
        </div>

          <div class="row">
              <div class="col-lg-8" style="width: 50%">
                  <section class="panel">
                      <header class="panel-heading add-heading">
                          所有项目出差类型报销总费用按月分布
                          <i class="add-icon">更新于：2018/09/05 14:00:00</i>
                      </header>
                      <div class="panel-body">
                          <div id="main6" style="width:100%;height:362px;"></div>
                      </div>
                  </section>
              </div>
              <div class="col-lg-4" style="width: 50%">
                  <section class="panel">
                      <header class="panel-heading add-heading">
                        资产折旧费用按月分布
                          <i class="add-icon">更新于：2018/09/05 14:00:00</i>
                      </header>
                      <div class="panel-body">
                          <div id="main7" style="width:100%;height:362px;"></div>
                      </div>
                  </section>
              </div>
          </div>

      </div>
    </div>
    <!--state overview end-->
  </section>
</section>
<!-- echarts组件 -->
  <script type="text/javascript" src="assets/echarts/echarts.min.js"></script>

<script>
    function findProData($scope,CertusFormAjax) {
        CertusFormAjax.ajax('findPhaseTjs',{"param":0},function (response) {
            var data = response.data;
            var yccost =[];
            var sjcost=[];
            var ycrt=[];
            var sjrt=[];
            for (var i=0;i<data.length;i++){
                if (data[i].phase=="XS"){
                    yccost[0]=data[i].forecastcost;
                    sjcost[0] = data[i].actualcost;
                    ycrt[0] = data[i].forecastday;
                    sjrt[0] = data[i].actualday;
                }else if (data[i].phase=="LX"){
                    yccost[1]=data[i].forecastcost;
                    sjcost[1] = data[i].actualcost;
                    ycrt[1] = data[i].forecastday;
                    sjrt[1] = data[i].actualday;
                }else if (data[i].phase=="TB"){
                    yccost[2]=data[i].forecastcost;
                    sjcost[2] = data[i].actualcost;
                    ycrt[2] = data[i].forecastday;
                    sjrt[2] = data[i].actualday;
                }else if (data[i].phase=="JF"){
                    yccost[3]=data[i].forecastcost;
                    sjcost[3] = data[i].actualcost;
                    ycrt[3] = data[i].forecastday;
                    sjrt[3] = data[i].actualday;
                }else{
                    yccost[4]=data[i].forecastcost;
                    sjcost[4] = data[i].actualcost;
                    ycrt[4] = data[i].forecastday;
                    sjrt[4] = data[i].actualday;
                }
            }
            var myChart1 = echarts.init(document.getElementById('main1'));
            option = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        crossStyle: {
                            color: '#999'
                        }
                    }
                },
                toolbox: {
                    feature: {
                        dataView: {show: true, readOnly: true},
                        magicType: {show: true, type: ['line', 'bar']},
                        restore: {show: true},
                        saveAsImage: {show: false}
                    }
                },
                legend: {
                    data:['预测成本','实际成本','预测人天','实际人天'],
                    left:50
                },
                xAxis: [
                    {
                        type: 'category',
                        data: ['线索','立项','投标','交付','回款'],
                        axisPointer: {
                            type: 'shadow'
                        }
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        name: '元',
                        axisLabel: {
                            formatter: '￥{value}'
                        }
                    },
                    {
                        type: 'value',
                        name: '人/天',
                        axisLabel: {
                            formatter: '{value}'
                        }
                    }
                ],
                series: [
                    {
                        name:'预测成本',
                        type:'bar',
                        data:yccost
                    },
                    {
                        name:'实际成本',
                        type:'bar',
                        data:sjcost
                    },
                    {
                        name:'预测人天',
                        type:'line',
                        yAxisIndex: 1,
                        data:ycrt
                    },
                    {
                        name:'实际人天',
                        type:'line',
                        yAxisIndex: 1,
                        data:sjrt
                    }
                ]
            };
            myChart1.setOption(option);
        });

        CertusFormAjax.ajax('findMonthTjs',{"param":0},function (response) {
            var data = response.data;
            var yccost =[];
            var sjcost=[];
            var ycrt=[];
            var sjrt=[];
            for (var i=0;i<data.length;i++){
                yccost[i]=data[i].yccost;
                sjcost[i]=data[i].sjcost;
                ycrt[i]=data[i].ycpercent;
                sjrt[i]=data[i].sjpercent;
            }
            var myChart2 = echarts.init(document.getElementById('main2'));
            option = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        crossStyle: {
                            color: '#999'
                        }
                    }
                },
                toolbox: {
                    feature: {
                        dataView: {show: true, readOnly: true},
                        magicType: {show: true, type: ['line', 'bar']},
                        restore: {show: true},
                        saveAsImage: {show: false}
                    }
                },
                legend: {
                    data:['预测成本','实际成本','预测人天','实际人天'],
                    left:50
                },
                xAxis: [
                    {
                        type: 'category',
                        data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
                        axisPointer: {
                            type: 'shadow'
                        }
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        name: '元',
                        axisLabel: {
                            formatter: '￥{value}'
                        }
                    },
                    {
                        type: 'value',
                        name: '人/天',
                        axisLabel: {
                            formatter: '{value}'
                        }
                    }
                ],
                series: [
                    {
                        name:'预测成本',
                        type:'bar',
                        data:yccost
                    },
                    {
                        name:'实际成本',
                        type:'bar',
                        data:sjcost
                    },
                    {
                        name:'预测人天',
                        type:'line',
                        yAxisIndex: 1,
                        data:ycrt
                    },
                    {
                        name:'实际人天',
                        type:'line',
                        yAxisIndex: 1,
                        data:sjrt
                    }
                ]
            };
            myChart2.setOption(option);
        });

        CertusFormAjax.ajax('findBussesTjs',{"param":0},function (response) {
            var data = response.data;
            var bugetlist = data.nbugetList;
            var treimlist = data.ntreimList;
            var yccost =[];
            var sjcost=[];
            for (var i=0;i<bugetlist.length;i++){
                yccost[i]=bugetlist[i].ycbuget;
            }
            for (var i=0;i<treimlist.length;i++){
                sjcost[i]=treimlist[i].sjcost;
            }
            var myChart2 = echarts.init(document.getElementById('main4'));
            option = {
                title: {
                    text: '折线图堆叠'
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data:['预测费用','实际费用']
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                toolbox: {
                    feature: {
                        saveAsImage: {}
                    }
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        name:'预测费用',
                        type:'line',
                        data:yccost
                    },
                    {
                        name:'实际费用',
                        type:'line',
                        data:sjcost
                    }
                ]
            };

            myChart2.setOption(option);
        });

        CertusFormAjax.ajax('findBussesPhasTjs',{"param":0},function (response) {
            var data = response.data;
            var bugetlist = data.bugetList;
            var treimDays = data.treimDays;
            var yccost =[];
            var sjcost = [];
            for (var i=0;i<bugetlist.length;i++){
                yccost[i]=bugetlist[i].buget;
            }
            for (var i=0;i<treimDays.length;i++){
                if (treimDays[i].phase=="XS"){
                    sjcost.push(treimDays[i].cost);
                }else if (treimDays[i].phase=="LX"){
                    sjcost.push(treimDays[i].cost);
                }else if (treimDays[i].phase=="TB"){
                    sjcost.push(treimDays[i].cost);
                }else if (treimDays[i].phase=="JF"){
                    sjcost.push(treimDays[i].cost);
                }else {
                    sjcost.push(treimDays[i].cost);
                }
            }
            var myChart2 = echarts.init(document.getElementById('main5'));
            option = {
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data:['预测费用','实际费用']
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                toolbox: {
                    feature: {
                        saveAsImage: {}
                    }
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: ["XS","LX","TB","JF","HK"]
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        name:'预测费用',
                        type:'line',
                        data:yccost
                    },
                    {
                        name:'实际费用',
                        type:'line',
                        data:[0,0,0,0,0]
                    }
                ]
            };

            myChart2.setOption(option);
        });
        CertusFormAjax.ajax('findBussMoneyTop10',{},function (response) {
            var data = response.data;
            var moneys=[];
            var proNames = [];
            for (var i = 0;i<data.length;i++){
                proNames[i]=data[i].pro_name;
                moneys[i]=data[i].totalMoney;
            }
            var myChart2 = echarts.init(document.getElementById('spmain'));
            option = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                legend: {
                    data: ['报销费用']
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'value',
                    boundaryGap: [0, 0.01]
                },
                yAxis: {
                    type: 'category',
                    data: proNames
                },
                series: [
                    {
                        name: '报销费用',
                        type: 'bar',
                        data: moneys
                    }
                ]
            };
            myChart2.setOption(option);
        });

        CertusFormAjax.ajax('findMBusessType',{"proId":0},function (response) {
            var data = response.data;
            var trains=[];
            var plans = [];
            var traffics = [];
            var hotels = [];
            var repetitions = [];
            var others = [];
            var travelAllowances = [];
            var fmonth=[1,2,3,4,5,6,7,8,9,10,11,12]
            for (var i=0;i<data.length;i++){
                var code= data[i].tri_class_code;
                var emonth = data[i].month;
                var name = data[i].totalMoney;
                if (code=="train"){
                    for (var j=0;j<fmonth.length;j++){
                        if(emonth==fmonth[j]){
                            trains.push(name);
                        }
                    }
                }else if (code=="plan"){
                    for (var j=0;j<fmonth.length;j++){
                        if(emonth==fmonth[j]){
                            plans.push(name);
                        }
                    }
                }else if (code=="traffic"){
                    for (var j=0;j<fmonth.length;j++){
                        if(emonth==fmonth[j]){
                            traffics.push(name);
                        }
                    }
                }else if (code=="hotel"){
                    for (var j=0;j<fmonth.length;j++){
                        if(emonth==fmonth[j]){
                            hotels.push(name);
                        }
                    }
                }else if (code=="repetition"){
                    for (var j=0;j<fmonth.length;j++){
                        if(emonth==fmonth[j]){
                            repetitions.push(name);
                        }
                    }
                }else if (code=="others"){
                    for (var j=0;j<fmonth.length;j++){
                        if(emonth==fmonth[j]){
                            others.push(name);
                        }
                    }
                }else{
                    for (var j=0;j<fmonth.length;j++){
                        if(emonth==fmonth[j]){
                            travelAllowances.push(name);
                        }
                    }
                }
            }
            var myChart2 = echarts.init(document.getElementById('main6'));
            option = {
                tooltip : {
                    trigger: 'axis',
                    axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                        type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                    }
                },
                legend: {
                    data:['火车/汽车','飞机','交通费用','住宿费用','招待费','其他费用','出差补助']
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis : [
                    {
                        type : 'category',
                        data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
                    }
                ],
                yAxis : [
                    {
                        type : 'value'
                    }
                ],
                series : [
                    {
                        name:'火车/汽车',
                        type:'bar',
                        barWidth : 30,
                        stack: '各类出差报销',
                        data:trains
                    },
                    {
                        name:'飞机',
                        type:'bar',
                        stack: '各类出差报销',
                        data:plans
                    },
                    {
                        name:'交通费用',
                        type:'bar',
                        stack: '各类出差报销',
                        data:traffics
                    },
                    {
                        name:'住宿费用',
                        type:'bar',
                        stack: '各类出差报销',
                        data:hotels
                    },
                    {
                        name:'招待费',
                        type:'bar',
                        stack: '各类出差报销',
                        data:repetitions
                    },
                    {
                        name:'其他费用',
                        type:'bar',
                        stack: '各类出差报销',
                        data:others
                    },
                    {
                        name:'出差补助',
                        type:'bar',
                        stack: '各类出差报销',
                        data:travelAllowances
                    }
                ]
            };
            myChart2.setOption(option);
        });
        CertusFormAjax.ajax('findAssetMs',{"param":0},function (response) {
            var data = response.data;
            var moneys = [];
            for (var i=0;i<data.length;i++){
                moneys.push(data[i].totalMoney)
            }
            var myChart2 = echarts.init(document.getElementById('main7'));
            option = {
                color: ['#3398DB'],
                tooltip : {
                    trigger: 'axis',
                    axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                        type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis : [
                    {
                        type : 'category',
                        data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
                        axisTick: {
                            alignWithLabel: true
                        }
                    }
                ],
                yAxis : [
                    {
                        type : 'value'
                    }
                ],
                series : [
                    {
                        name:'资产折旧费用',
                        type:'bar',
                        barWidth: '60%',
                        data:moneys
                    }
                ]
            };
            myChart2.setOption(option);
        })
    }
</script>

  <script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart3 = echarts.init(document.getElementById('main3'));
    option = {
      tooltip: {
        trigger: 'item',
        formatter: "{b}{a} : {c}%"
      },
      toolbox: {
        feature: {
          dataView: {
            readOnly: false
          },
          restore: {},
          // saveAsImage: {}
        }
      },
      legend: {
        show: false,
        data: ['线索', '立项', '合同', '交付', '回款'],
      },
      color: ['#4e616d', '#4a8bc2', '#fcb321', '#ff6666', '#a9d86e', ],
      series: [{
          name: '预期转化率',
          type: 'funnel',
          left: '10%',
          width: '80%',
          label: {
            normal: {
              formatter: '{b}'
            },
            emphasis: {
              position: 'inside',
              formatter: '{b}'
            }
          },
          labelLine: {
            normal: {
              show: false
            }
          },
          itemStyle: {
            normal: {
              opacity: 0.7
            }
          },
          data: [{
              value: 100,
              name: '线索'
            },
            {
              value: 80,
              name: '立项'
            },
            {
              value: 60,
              name: '合同'
            },
            {
              value: 40,
              name: '交付'
            },
            {
              value: 20,
              name: '回款'
            }
          ]
        },
        {
          name: '实际转化率',
          type: 'funnel',
          left: '10%',
          width: '80%',
          maxSize: '80%',
          label: {
            normal: {
              position: 'inside',
              formatter: '{c}%',
              textStyle: {
                color: '#fff'
              }
            },
            emphasis: {
              position: 'inside',
              formatter: '实际转化率: {c}%'
            }
          },
          itemStyle: {
            normal: {
              opacity: 0.5,
              borderColor: '#fff',
              borderWidth: 2
            }
          },
          data: [{
              value: 80,
              name: '线索'
            },
            {
              value: 60,
              name: '立项'
            },
            {
              value: 40,
              name: '合同'
            },
            {
              value: 20,
              name: '交付'
            },
            {
              value: 10,
              name: '回款'
            }
          ]
        }
      ]
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart3.setOption(option);
  </script>